<template>
  <div class="ico-list">
    <i
      v-for="(item, index) of uniqueList(iconsData)"
      :key="index"
      @click="handleIocns"
      class="fa"
      :class="item"
      aria-hidden="true"
    ></i>
  </div>
</template>

<script setup lang="ts">
  import { iconsData } from '@/types/icons';
  const emit = defineEmits<Emits>();
  interface Emits {
    (e: 'update:icons', val: string): void;
  }
  const uniqueList = (arr: string[]) => {
    return [...new Set(arr)];
  };

  const handleIocns = (event) => {
    emit('update:icons', event.target.outerHTML);
  };
</script>

<style lang="scss" scoped>
  .ico-list {
    .fa {
      margin: 5px;
      padding: 5px;
      cursor: pointer;
      font-size: 18px;
      // width: 30px;
      border-radius: 3px;
    }
    .fa:hover {
      background-color: var(--el-color-primary);
      color: #ffffff;
    }
  }
</style>
